<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Border-radius,image,box-shadow</title>
</head>

<body>
<b style="color:fuchsia">Border-radius Demo</b>
<hr>
<style type="text/css" media="screen">
  p.emtest {
    width: 300px;
    border-radius: 1em;
    background-color: #bebebe;
    text-align: center;
    border:2px solid #a1a1a1;
  }
  p.lrtest {
    width: 350px;
    border-radius: 2em 1em 0.5em;
    background-color: #fabd1e;
    text-align: center;
    border:2px solid #a1a1a1;
  }
</style>
<p class="emtest"> This is a border RADIUS Demo!!</p>
<p class="lrtest">This is a border RADIUS -  Demo!!</p>
<br>
<br>
<b style="color:lime;background-color:black;">Border-image Demo</b>
<hr>
<style type="text/css" media="screen">
  div.image {
    border: 15px solid transparent;
    background-color: gray;
    width: 250px;
    padding: 1px;
    border-image: url(./img/border.png) 30 30 round;
  }
</style>
<div class="image">This is a border image -  Demo!!
</div>
<p>下面是原图效果</p>
<img src="./img/border.png" alt="borderimage">
<br>
<br>
<br>
<b style="color:lime;background-color:black;">Box-shadow Demo</b>
<hr>
<style type="text/css" media="screen">
  div.box {
    width: 300px;
    height: 100px;
    background-color: #ff9900;
  /*   box-shadow:10px 10px 5px #888888 ;*/
  box-shadow:  0px 0px 4px 0px black;
  }
</style>
<div class="box">
    this is box-shadow Demo;
</div>
<br>
<br>
<br>


</body>
<html>
